<template>

  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
  >
    <div class="common-layout">
      <el-container>
        <el-header>
          店铺入驻信息填写
        </el-header>
        <el-main>
          <el-form-item label="店铺名称：" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="tel">
            <el-input v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="店铺地址：" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="Logo：">
            <el-upload
                class="upload-demo"
                action="http://localhost:8080/shop/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
                :auto-upload="true"
                :on-success="uploadSuccess"
            >
<!--            <el-input v-model="ruleForm.logo"></el-input>-->
            <el-button type="primary">上传图片</el-button>
          </el-upload>
          </el-form-item>
        </el-main>
        <el-header>
          管理员信息填写
        </el-header>
        <el-main>
          <el-form-item label="用户名称：" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="用户密码：" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="重复密码：" prop="repassword">
            <el-input type="password" v-model="ruleForm.repassword"></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="Email：" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="primary" @click="submitForm(ruleFormRef)"
            >Create
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
          </el-form-item>
        </el-main>
      </el-container>
    </div>
  </el-form>
</template>
<script>
import {reactive, ref} from "vue";
import {update} from "../../api/shop";
import {ElMessage} from "element-plus";
import router from "../../router";

export default {
  name: "shopAdd",
  setup() {
    const formSize = ref('')
    const ruleFormRef = ref('')
    const ruleForm = reactive({
      name: '',
      tel: '',
      address: '',
      logo: '',
      username: '',
      email: '',
      phone: '',
      password: '',
      repassword: '',
    })

    const rules = reactive({
      name: [
        {
          required: true,
          message: '请输入店铺地址',
          trigger: 'blur',
        },
        {
          min: 3,
          max: 10,
          message: '店铺名长度为3到10',
          trigger: 'blur',
        },
      ],
      tel: [
        {
          required: true,
          message: '请输入联系方式',
          trigger: 'blur',
        },
        {
          min: 7,
          max: 11,
          message: '长度为7-11',
          trigger: 'blur',
        },
      ],
      address: [
        {
          required: true,
          message: '请输入店铺地址',
          trigger: 'blur',
        },
      ],
      logo: [
        {
          required: true,
          message: '请输入logo',
          trigger: 'blur',
        },
      ],
      username: [
        {
          required: true,
          message: '请输入logo',
          trigger: 'blur',
        },
      ],
      email: [
        {
          required: true,
          message: '请输入email',
          trigger: 'blur',
        },
      ],
      phone: [
        {
          required: true,
          message: '请输入手机号码',
          trigger: 'blur',
        },
        {
          min: 7,
          max: 11,
          message: '长度为7-11',
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
        {
          min: 4,
          max: 18,
          message: '长度为4-18',
          trigger: 'blur',
        },
      ],
      repassword: [
        {
          required: true,
          message: '请重新输入密码',
          trigger: 'blur',
        },
      ],
    })

    const submitForm = (formEl) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          // console.log('submit!')
          if (ruleForm.password !== ruleForm.repassword) {
            ElMessage.error("密码不一致")
          } else {
            update({
              name: ruleForm.name,
              tel: ruleForm.tel,
              address: ruleForm.address,
              logo: ruleForm.logo,
              admin: {
                username: ruleForm.username,
                email: ruleForm.email,
                phone: ruleForm.phone,
                password: ruleForm.password
              }
            }).then(res => {
              ElMessage.success(res.msg)
              router.replace({path:"/login"})
            }).catch(e => {
              ElMessage.error(e)
            })
          }
        } else {
          console.log('error submit!')
          return false
        }
      })
    }

    const resetForm = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
    }

    const fileList = ref([])

    const uploadSuccess = (response, file, fileList) => {
      // console.log(response)
      // console.log(file)
      // console.log(fileList)
      // console.log(response.data.fullPath)
      ruleForm.logo = response.data.fullPath
    }

    const handleRemove = (file, fileList) => {
      console.log(file, fileList)
    }
    const handlePreview = (file) => {
      console.log(file)
    }
    return {
      fileList,
      handleRemove,
      uploadSuccess,
      handlePreview,
      resetForm,
      submitForm,
      rules,
      ruleForm,
      ruleFormRef,
      formSize
    }
  }
}
</script>

<style scoped>
.common-layout .el-header,
.common-layout .el-footer {
  background-color: #b3c0d1;
  text-align: center;
  line-height: 60px;
}

.common-layout .el-footer {
  line-height: 60px;
}

.common-layout .el-main {
  background-color: #e9eef3;
  line-height: 160px;
}
</style>
